<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付页</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" >
    <h1>支付确认页</h1>
    <div class="row">
        <div class="col align-self-start alert alert-primary"  role="alert">订单号：[[${orderId}]]</div>
    </div>
    <div class="row">
        <div class="col-4">
            <div class="card" style="width: 350px">
                <img th:src="@{/xiaomi11.jpg}" class="card-img-top" style="width: 300px">
                <div class="card-body">
                    <h5 class="card-title">小米11</h5>
                    <h6 class="card-subtitle mb-2 text-muted">暗夜黑</h6>
                    <a href="#" class="card-link btn btn-primary">¥ 1899</a>
                    <a href="#" class="btn btn-info">1件</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card" style="width: 350px">
                <img th:src="@{/macair.jpg}" class="card-img-top" style="width: 300px">
                <div class="card-body">
                    <h5 class="card-title">Mac Air M1</h5>
                    <h6 class="card-subtitle mb-2 text-muted">深空灰色</h6>
                    <a href="#" class="card-link btn btn-primary">¥ 7199</a>
                    <a href="#" class="btn btn-info">1件</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card" style="width: 350px">
                <div class="card-body">
                    <h5 class="card-title">账单</h5>
                    <h6 class="card-subtitle mb-2 text-muted">小米11(暗夜黑) x1 = 1899</h6>
                    <h6 class="card-subtitle mb-2 text-muted">MacAir M1(深空灰色) x1 = 7199</h6>
                    <a href="#" class="card-link btn btn-success">总计（¥）：9098</a>
                </div>
            </div>
            <div class="card" style="width: 350px;margin-top: 20px">
                <div class="card-body">
                    <h5 class="card-title">选择支付方式</h5>
                    <a th:href="@{/pay/order(type=weixin,orderId=${orderId})}"><img class="pay-img" th:src="@{/weixin-pay.png}"></a>
                    <a th:href="@{/pay/order(type=alipay,orderId=${orderId})}"><img class="pay-img" th:src="@{/alipay.svg}">
                    </a>
                    <a th:href="@{/pay/order(type=baitiao,orderId=${orderId})}"><img class="pay-img" th:src="@{/baitiao.png}"></a>
                    <a th:href="@{/pay/order(type=visa,orderId=${orderId})}">Visa支付</a>
                    <div>
                        <hr/>
                        支付宝<br/>
                        账号：tawmvu1129@sandbox.com <br/> 密码:111111 <br/>
                        <hr/>
                        微信自行扫码支付1分
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
</body>
<style>
    .pay-img {
        width: 100px;
        margin-top: 20px;
        display: block
    }

    .pay-img:hover {
        border: 1px solid black;
    }
</style>
</html>